<template>
  <div class="bigbox">
    <div class="Header">

      <div class="logo">
        <el-button type="primary" style="margin-right;: 16px" @click="drawer = true">
          open
        </el-button>

        <teleport to="body">
          <el-drawer v-model="drawer" :with-header="false">
            <el-button :plain="true" @click="ck1">点击登录</el-button>
          </el-drawer>
        </teleport>
      </div>

      <ul>
        <li @click="ck('index')">首页 </li>
        <!-- <li @click="ck('work')">工作介绍</li> -->
        <li @click="ck('news')">新闻中心</li>
        <li @click="ck('aus')">关于我们</li>
        <li @click="ck('contant')">联系我们</li>
      </ul>
    </div>
    <div class="Main">
      <router-view />
    </div>
    <div class="Footer"></div>
  </div>
</template>

<script lang="ts">
import router from '../router/index'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
export default {
  setup() {
    const drawer = ref(false)
    function ck(name1: string) {
      router.push({ name: name1 });
    }
    function ck1() {
      ElMessage({
        message: '恭喜你退出登录成功！！！',
        type: 'success',
      })
      localStorage.removeItem("username");
      router.push({ name: 'about' })
    }
    return {
      ck,
      drawer,
      ck1
    }
  }
}
</script>

<style lang="less" scoped>
img {
  width: 100%;
  height: 100%;
}

.bigbox {
  position: absolute;
  min-height: 100%;
  width: 100%;
  background-color: @bigbcg;

  .Header {
    width: 100%;
    height: 100px;
    background-color: @black;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: @fontcor;

    // flex-wrap: wrap;
    li {
      display: inline;
      padding-left: 50px;
      font-size: 30px;
      font-weight: 600;
    }

    .logo {
      position: absolute;
      left: 50px;
    }
  }

  // 头像
  .tou {
    position: absolute;
    width: 80px;
    height: 80px;
    text-align: center;
    border-radius: 50%;
    overflow: hidden;
    left: 50px;

  }
}
</style>